<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Account List</title>
</head>
<body>
<div class="container">
    <div class="panel panel-default">

        <div class="panel-heading">
            <table width="100%">
                <tr>
                    <th width="30%">
                        <a href="/account/operate/${0}" class="btn btn-default" id="p_add" align="left"
                           style="width: 70%">Add Account</a>
                    </th>
                    <th width="40%">
                        <h1 id="account" style="width: 100%" align="center">Account List</h1>
                    </th>
                    <th width="30%">
                        <#--<div id="div_search" align="right" style="width: 100%">-->
                            <#--<div class="input-group">-->
                                <#--<input id="ip_search" type="text" class="form-control" placeholder="Search for...">-->
                                <#--<span class="input-group-btn">-->
                            <#--<button id="btn_search" class="btn btn-default" type="button">Go!</button>-->
                            <#--</span>-->
                            <#--</div>-->
                        <#--</div>-->
                    </th>
                </tr>
            </table>
        </div>
    </div>
    <div class="panel-body">
        <table class="display" id="tab_account">
            <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Remark</th>
                <th>State</th>
                <th>CreateTime</th>
                <th>LoginTime</th>
                <th>Type</th>
                <th>Operation</th>
                <th>Operation</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        <#--<#list list as account>-->
        <#--<tr>-->
        <#--<td>${account.ac_code}</td>-->
        <#--<td>${account.ac_name}</td>-->
        <#--<td>${account.ac_remark!""}</td>-->
        <#--<td>-->
        <#--<#switch account.ac_state>-->
        <#--<#case 1>-->
        <#--在线-->
        <#--<#break>-->
        <#--<#case 2>-->
        <#--下线-->
        <#--<#break>-->
        <#--<#case 3>-->
        <#--封存-->
        <#--<#break>-->
        <#--</#switch>-->
        <#--</td>-->
        <#--<td>${account.ac_createtime}</td>-->
        <#--<td>${account.ac_logintime}</td>-->
        <#--<td>-->
        <#--<#switch account.ac_type>-->
        <#--<#case 1>-->
        <#--用户-->
        <#--<#break>-->
        <#--<#case 2>-->
        <#--游客-->
        <#--<#break>-->
        <#--</#switch>-->
        <#--</td>-->
        <#--<td><a class="btn btn-info" onclick="delbycode(${account.ac_code})" >Delete</a>-->
        <#--<a class="btn btn-info" href="/account/operate/${account.ac_code}" >Edit</a></td>-->
        <#--</tr>-->
        <#--</#list>-->
        </table>
    </div>
</div>
</div>
</body>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tab_account").dataTable({
            language: lang,
            autoWidth: false,
            processing: true,
            serverSide: true,
            renderer: "bootstarp",
           "ajax":"/account/data",

            columns: [
                {"data": "ac_code"},
                {"data": "ac_name"},
                {"data": "ac_remark"},
                {
                    data: "ac_state",
                    render: function (data, type, row, meta) {
                        switch(data){
                            case 1:
                                return "上线";
                            case 2:
                                return "离线";
                            case 3:
                                return "封存";
                        }
                    }
                },
                {"data": "ac_createtime"},
                {"data": "ac_logintime"},
                {
                    data: "ac_type",
                    render: function (data, type, row, meta) {
                        switch(data){
                            case 1:
                                return "用户";
                            case 2:
                                return "游客";

                        }
                    }
                },
                {
                    data: null,
                    "bSortable": false,
                    title: "Delete",
                    render: function (data, type, row, meta) {
                        console.info(row);
                        var title = "<a class=\"btn btn-info\"  onclick='delbycode(" + row.ac_code + ")'>Delete</a>"
                        return title;
                    }
                },
                {
                    data: null,
                    "bSortable": false,
                    title: "Edit",
                    render: function (data, type, row, meta) {
                        console.info(row);
                        var title;
                        if(row.ac_state==3){
                            title = "<a class=\"btn btn-info\" disabled=\"disabled\"  href='/account/operate/" + row.ac_code + "'>Edit</a>"
                        }else{
                            title = "<a class=\"btn btn-info\"  href='/account/operate/" + row.ac_code + "'>Edit</a>"
                        }

                        return title;
                    }
                },
                {
                    data: null,
                    "bSortable": false,
                    title: "Seal",
                    render: function (data, type, row, meta) {
                        var title;
                       if(row.ac_state==3) {
                           title = "<a class=\"btn btn-info\"  onclick='sealByCode(" + row.ac_code + "," + row.ac_state + ")'>UnSeal</a>"
                       }else{
                           title = "<a class=\"btn btn-info\"  onclick='sealByCode(" + row.ac_code + "," + row.ac_state + ")'>Seal</a>"
                       }
                        return title;
                    }
                }
            ]

        });
    });

    var lang = {
        "sProcessing": "处理中...",
        "sLengthMenu": "每页 _MENU_ 项",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
        "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页",
            "sJump": "跳转"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    };

    function delbycode(code) {
        var result = confirm("是否删除该数据？");
        if (result) {
            $.get("/account/" + code, function (result) {
                if (result && result['success']) {
                    alert(result['message']);
                    window.location.reload()
                }
            })
        }
    }
   function sealByCode(code,state) {
       var result;
       if(state==3){
           result= confirm("是否启封该数据？");
       }else {
           result= confirm("是否封存该数据？");
       }

       if (result) {
           $.post("/account/" + code,{}, function (result) {
               if (result && result['success']) {
                   alert(result['message']);
                   window.location.reload()
               }
           })
       }
   }
</script>
</html>